<template>
  <div class="Main">
    <!-- 1. 疫情图片 -->
    <img src="../assets/images/top.PNG" alt="疫情图片">
    <!-- 2. 病毒信息 -->
    <CovInfo :covDesc="covDesc"/>
    <!-- 3. 疫情-小导航 -->
    <div class="list">
      <div class="mainTag">
        <img src="../assets/images/1.PNG" alt="">
        <div>1元义诊</div>
      </div>
      <div class="mainTag" @click="goHesuan"> 
        <div class="testing">
          <img src="../assets/images/2.PNG" alt="">
          <img class="hot" src="../assets/images/hot.PNG" alt="">
        </div>
        <div>核酸检测</div>
      </div>
      <div class="mainTag" @click="goFangyi">
        <img src="../assets/images/3.PNG" alt="">
        <div>防疫物资</div>
      </div>
      <div class="mainTag" @click="goChuxing">
        <img src="../assets/images/4.PNG" alt="">
        <div>出行政策</div>
      </div>
    </div>

    <!-- 4. 数据统计 -->

    <!-- 地区风险 -->
    <AreaRisk id="arearisk" :covDesc="covDesc"/>

    <!-- 国内数据 -->
    <CovNumber id="covnumber" :covDesc="covDesc"/>

    <!-- 全球数据 -->
    <GlobalNumber id="globalnumber" :covDesc="covDesc"/>

    <!-- 新冠疫苗 -->
    <Vaccine id="vaccine" :covDesc="covDesc"/>

  </div>
</template>

<script>
    // import {provide,defineAsyncComponent} from 'vue'
    import infoPoint from '../hooks/infoPoint'
    import routerJump from '../hooks/routerJump'
    import CovInfo from '../components/CovInfo.vue'
    import AreaRisk from '../components/AreaRisk.vue'
    import CovNumber from '../components/CovNumber.vue'
    import GlobalNumber from '../components/GlobalNumber.vue'
    import Vaccine from '../components/Vaccine.vue'
    
    export default {
        name: 'Main',
        components: {
          CovInfo,
          AreaRisk,
          CovNumber,
          GlobalNumber,
          Vaccine
          // Vaccine: defineAsyncComponent(()=>{
          //   import('../components/Vaccine.vue')
          // })
        },
        setup() {
          // 病毒信息获取
          let covDesc = infoPoint()
          // provide('covDesc',covDesc)
          // 跳转路由方法
          const {goHesuan, goFangyi , goChuxing} = routerJump()

          return {
            covDesc,
            goHesuan,
            goFangyi,
            goChuxing
          }
        },
        // mounted() {
        //   console.log(this.covDesc);
        // },
    }
</script>

<style lang="less" scoped>
  img {
    width: 100%;
  }

  .list {
    display: flex;
    justify-content: center;
    align-content: space-around;
    margin-bottom: 0.2rem;
    width: 100%;
    div {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 1.9rem;
      img {
        width: 1rem;
      }
      .testing {
        position: relative;
        .hot {
          position: absolute;
          top: 0.05rem;
          right: 0.2rem;
          width: 0.55rem;
          height: 0.35rem;
        }
      }
    }
    
  }
</style>